<template>
	<div class="add-page">
		<el-tabs
			v-model="addType"
			class="question-tabs"
		>
			<!-- 批量添加试题 -->
			<el-tab-pane label="批量上传" name="batch" />
			<!-- 单个添加试题 -->
			<el-tab-pane label="手动录入" name="single" />
		</el-tabs>
		<div class="height-12" />
		<div class="add-question">
			<add-batch ref="addBatchRef" v-if="addType==='batch'" />
			<edit-frame
				v-if="addType==='single'"
				type="add"
				@change="onQuestionChange"
			/>
		</div>
		<!-- 操作按钮区域 -->
		<div class="add-button flex jc-center ai-center">
			<el-button @click="onGoToList" :type="addType==='single'?'primary':''">
				返回
			</el-button>
			<template v-if="addType==='batch'">
				<el-button class="theme_font_color theme-border-color" @click="onPreview">
					预览
				</el-button>
				<el-button type="primary" @click="onSubmit">
					提交
				</el-button>
			</template>
		</div>
	</div>
</template>

<script>
	import EditFrame from "../components/edit-frame/index.vue";
	import AddBatch from "../components/add-batch/index.vue";
	export default {
		components: {
            EditFrame,
            AddBatch
        },
        data(){
            return {
                addType:'batch',
                question:{}
            };
        },
        created() {
            //设置默认的添加类型
            const {addType} = this.$route.query;
            if(['batch','single'].includes(addType)){
                this.addType = addType;
            } else {
                this.addType = 'batch';
            }
        },
        methods:{
            //返回试题管理页面
            onGoToList(){
                nlapp.TabManager.closeBack(`/rc/questions/list`);
            },
            onQuestionChange(question){
                this.question = question;
            },
            //批量上传提交
            onSubmit(){
                this.$refs.addBatchRef.api_submit();
            },
            onPreview(){
                this.$refs.addBatchRef.api_preview();
            }

        }
	};
</script>
<style lang="less" scoped>
    .add-page{
        position: relative;
        height: 100%;
        display: flex;
        flex-direction: column;
        /deep/ .question-tabs  {
            .el-tabs__item {
                font-size: 16px;
                font-weight: 400;
                height: 52px;
                line-height: 52px;
            }
            .el-tabs__nav-wrap::after  {
                background-color: transparent;
            }
            .el-tabs__item.is-active{
                font-weight: bold;
            }
            .el-tabs__active-bar.is-top{
                height: 2px;
            }
            .el-tabs__header{
                background: #fff;
                padding: 0 40px 0 32px;
                margin-bottom: 0;
            }
        }

        .add-button{
            position: absolute;
            right: 0;
            top: 6px;
            height: 40px;
            padding-right: 20px;
        }
    }
    .add-question{
        flex: 1;
        overflow-y: scroll;
    }
    /deep/.pad10{
        padding: 0;
    }
    .height-12{
        flex-shrink: 0;
        height: 12px!important;
        background: #f4f5f9
    }
</style>
